doctype html
html(lang="en")
    head
        meta(charset="utf-8")
        meta(name="description", content= "tsParticles")
        meta(name="author", content= "Matteo Bruni")
        meta(name="apple-mobile-web-app-capable" content="yes")
        meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no")

        meta(name="twitter:card" content="summary_large_image")
        meta(name="twitter:creator" content="@HollowMatt_ITA")
        meta(name="twitter:image:src" content="https://particles.js.org/images/demo2.png")
        meta(property="og:title" content="tsParticles - A lightweight TypeScript library for creating particles")
        meta(property="og:site_name" content="tsParticles")
        meta(property="og:url" content="https://particles.js.org/")
        meta(property="og:description" content="A lightweight TypeScript library for creating particles.")
        meta(property="og:image" content="https://particles.js.org/images/demo2.png")

        title tsParticles
        link(href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css")
        link(href="/fontawesome/css/all.css" rel="stylesheet" type="text/css")
        link(href="/jsoneditor/jsoneditor.css" rel="stylesheet" type="text/css")

        style.
            /* ---- reset ---- */
            body {
                margin: 0;
                font: normal 75% Arial, Helvetica, sans-serif;
            }

            canvas {
                display: block;
                vertical-align: bottom;
            }

            button {
                width: 300px;
                height: 60px;
                font-size: 20px;
                position: absolute;
                margin-top: -30px;
                margin-left: -150px;
                top: 50%;
                left: 50%;
            }
    body
        #tsparticles
        button#fancy-btn(type="button") Fancy Button

        script(src="/jquery/jquery.slim.min.js")
        script(src="/popper.js/umd/popper.min.js")
        script(src="/bootstrap/js/bootstrap.min.js")
        script(src="/tsparticles/tsparticles.min.js")
        script.
            tsParticles
                .load("tsparticles", {
                    fullScreen: {
                        enable: true,
                        zIndex: 100
                    },
                    particles: {
                        number: {
                            value: 0
                        },
                        size: {
                            value: { min: 1, max: 3 }
                        },
                        life: {
                            count: 1,
                            duration: {
                                value: 0.75
                            }
                        },
                        move: {
                            enable: true
                        }
                    },
                    emitters: {
                        "direction": "none",
                        "shape": "square",
                        "fill": false,
                        "rate": {
                            "quantity": 50,
                            "delay": 0.1
                        },
                        "spawnColor": {
                            "value": "#ff0000",
                            "animation": {
                                "enable": true,
                                "speed": 10
                            }
                        },
                        "domId": "fancy-btn"
                    }
                });
